<template>
  <a-card :bordered="true" title="基本信息" style="margin-top: 24px">
    <a-form-model ref="form" :model="innerModel" :rules="validatorRules">
      <a-row>
        <a-col :span="24">
          <a-form-model-item label="商品名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="spuName">
            <a-input v-model="innerModel.spuName" placeholder="请输入商品名称"></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="商品描述" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="spuDescription">
            <a-input v-model="innerModel.spuDescription" placeholder="请输入商品描述"></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="所属分类" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="catalogId">
            <select-category @selectCategory="initBrandList" v-model="innerModel.catalogId"
                             :placeholder="'请选择所属分类'"></select-category>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="所属品牌" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="brandId">
            <a-select v-model="innerModel.brandId" placeholder="请选择品牌">
              <a-select-option :value="item.id" v-for="item in brandList" :key="item.id">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="商品重量（KG）" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="weight">
            <a-input-number :step="0.01" v-model="innerModel.weight" placeholder="请输入商品重量（KG）"
                            style="width: 100%"
                            :min="0" />
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="设置金币" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="buyBounds">
            <a-input-number v-model="innerModel.buyBounds" placeholder="请输入金币数量" style="width: 100%" :min="0" />
          </a-form-model-item>
          <a-form-model-item label="设置金币" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="growBounds">
            <a-input-number style="width: 100%" v-model="innerModel.growBounds" placeholder="请输入成长值" :min="0" />
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="上架状态" :labelCol="labelCol" :wrapperCol="wrapperCol"
                             prop="publishStatus">
            <a-radio-group v-model="innerModel.publishStatus">
              <a-radio :value="0">
                新建
              </a-radio>
              <a-radio :value="1">
                上架
              </a-radio>
              <a-radio :value="2">
                下架
              </a-radio>
            </a-radio-group>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="商品介绍" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="weight">
            <j-image-upload :isMultiple="false" v-model="innerModel.description"
                            placeholder="请上传商品介绍图片"></j-image-upload>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="商品图集" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="weight">
            <j-image-upload :isMultiple="true" v-model="innerModel.images"
                            placeholder="请上传商品图集"></j-image-upload>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row style="display: flex;justify-content: center">
        <a-button @click="onSubmit" type="primary">设置规格参数</a-button>
      </a-row>
    </a-form-model>

  </a-card>
</template>
<script>
import SelectCategory from '../../../components/compents/SelectCategory.vue'
import SelectBrand from '../../../components/compents/SelectBrand.vue'
import { getAction, postAction } from '../../../api/manage'

export default {
  components: { SelectBrand, SelectCategory },
  props: {
    spuModel: {
      type: Object
    }
  },
  watch: {
    spuModel: {
      handler(newVal) {
        this.innerModel = newVal
      },
      deep: true
    },
    innerModel: {
      handler(newVal) {
        this.$emit('input', newVal)
      },
      deep: true
    }
  },
  data() {
    return {
      brandList: [],
      innerModel: {
        spuName: '',
        spuDescription: '',
        catalogId: undefined,
        brandId: undefined,
        weight: '',
        publishStatus: '',
        buyBounds: '',
        growBounds: '',
        description: '',
        images: ''
      },
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      confirmLoading: false,
      validatorRules: {
        spuName: [{ required: true, validator: this.verifySpuName }],
        spuDescription: [{ required: true, message: '请输入商品介绍！' }],
        catalogId: [{ required: true, message: '请选择商品分类！' }],
        brandId: [{ required: true, message: '请选择品牌分类！' }],
        weight: [{ required: true, message: '请输入商品重量！' }],
        publishStatus: [{ required: true, message: '选择商品上下架状态！' }],
        buyBounds: [{ required: true, message: '请输入金币！' }],
        growBounds: [{ required: true, message: '请输入成长值！' }],
        description: [{ required: true, message: '请上传商品介绍图！' }],
        images: [{ required: true, message: '请上传商品图集！' }]
      },
      url: {
        verifySpuName: '/product/spuInfo/verifySpuName',
        getListByCategoryId: '/product/categoryBrandRelation/getListByCategoryId'
      }
    }
  },
  methods: {
    /**
     *校验商品名
     */
    verifySpuName(rule, value, callback) {
      if (value === undefined || value === '') {
        return callback(new Error('请填写商品名称！'))
      }
      postAction(this.url.verifySpuName, this.innerModel).then(res => {
        if (res.success) {
          callback()
        } else {
          return callback(new Error(res.message))
        }
      })
    },
    /**
     *
     * @param categoryId 分类id
     */
    initBrandList(categoryId) {
      getAction(this.url.getListByCategoryId, { categoryId: categoryId }).then(res => {
        if (res.success) {
          this.brandList = res.result
        } else {
          this.$message.error('获取绑定品牌列表失败！')
        }
      })
    },
    /**
     * 提交表单
     */
    onSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$emit('next')
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style scoped>

</style>